const { src, dest, parallel, series } = require("gulp")
const less = require("gulp-less")
const autoprefixer = require("gulp-autoprefixer")
const cleancss = require("gulp-clean-css")
const rename = require("gulp-rename")
const babel = require("gulp-babel")
const uglify = require("gulp-uglify")
const htmlmin = require("gulp-htmlmin")
const del = require("del")
const browserSync = require('browser-sync')
const bs = browserSync.create()

// 声明 css样式 的构建任务
const style = () => {
    return src("src/css/index.less", { base: "src" })
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(cleancss())
        .pipe(rename({ "extname": ".min.css" }))
        .pipe(dest("dist"))
}

// 声明 脚本javascript 的构建任务
const script = () => {
    // 流 就是异步操作
    return src("src/js/index.js", { base: "src" })
        .pipe(babel({
            presets: ['babel-preset-env']
        }))
        .pipe(uglify())
        .pipe(rename({ "extname": ".min.js" }))
        .pipe(dest("dist"))
}
const js1 = () => {
    // 流 就是异步操作
    return src("src/js/jquery-1.12.4.min.js", { base: "src" })
        .pipe(dest("dist"))
}
const js2 = () => {
    // 流 就是异步操作
    return src("src/js/template-native.js", { base: "src" })
        .pipe(dest("dist"))
}


// 声明 页面 的构建任务
const html = () => {
    return src('src/html/index.html', { base: "src" })
        .pipe(htmlmin(
            {
                collapseWhitespace: true,
                minifyCSS: true,
                minifyJS: true
            }
        ))
        .pipe(rename({ "extname": ".min.html" }))
        .pipe(dest('dist'))
}

// 声明 文件清除 任务
const clean = () => {
    return del(['dist'])
}


// 声明 服务发布 任务
const serve = () => {
    bs.init({
        notify: false,      // 禁用 浏览器 右上角的 browserSync connected 提示框
        files: 'dist/**',   // 监视 dist 下 文件的变化，然后在浏览器上实时更新
        server: {
            baseDir: "./dist "    // 指定服务启动的目录  
            // routes: {
            //     '/node-modules': "node-modules"
            // }
        }
    })
}

const build = parallel(style, script, js1, js2, html)
const dev = series(clean, build, serve)

module.exports = {style, build, serve, dev }
